<template>
  <div class="home">
    <Menu />
    <h2>Vuecli4 力向导图示例</h2>
    <ForceDirected id="mytest" width="1200" height="600" :nodes="nodes" :edges="edges"></ForceDirected>
  </div>
</template>
<script>
import ForceDirected from "@/components/Force-Directed.vue";
import HelloWorld from "@/components/HelloWorld.vue";
export default {
  name: "d3Home",
  components: {
    ForceDirected,
    // eslint-disable-next-line vue/no-unused-components
    HelloWorld,
  },
  data() {
    return {
      // 节点集
      nodes : [
        { name: "天津大学" },
        { name: "智能与计算学部" },
        { name: "小超" },
        { name: "小丽" },
        { name: "小华" },
      ],
      // 边集
      edges : [
        { source: 0, target: 4, relation: "学生", value: 1.7 },
        { source: 0, target: 2, relation: "学生", value: 1.7 },
        { source: 0, target: 3, relation: "学生", value: 1.7 },
        { source: 0, target: 1, relation: "分院", value: 1.7 },
        { source: 2, target: 3, relation: "国顺aaa", value: 1.9 },
        { source: 2, target: 0, relation: "国顺bbb", value: 10 },
      ]
    };
  },
}
</script>

<style scoped>

</style>
